Skip to main content

Top 10 Advanced CSS Responsive Design Concepts You Should Know

note

本篇內容主要參考 Top 10 Advanced CSS Responsive Design Concepts You Should Know

Viewport Meta Tag​

  • 在 html 寫是為了讓頁面在其他裝置上可以依比例縮放
<meta
  name="viewport"
  content="width=device-width, height=device-height, initial-scale=1.0"
/>

Media Query​

  • css 的 media query 除了可以寫寬度（min-width、max-width）還可以寫以下內容

    • orientation 為 landscape 當螢幕寬度大於高度，或 portrait 高度大於寬度。
    .box {
      background: blue;
      width: 200px;
      height: 200px;
    }

    @media (orientation: portrait) {
      .box {
        background: red;
      }
    }

    /* 代表當螢幕高度大於寬度時，box 會是紅色的 */
    • min-aspect-ratio：螢幕的比例，例如 1:1 就是 1 / 1
    @media (orientation: portrait) {
      .box {
        background: red;
      }
    }

    /* 當螢幕寬為 1:1 時 box 會是紅色的 */
    • width >= 300px 其實等於 min-width: 300px，但前者會比較易讀（也可以寫範圍 100px <= width >= 300px）
      caution

      目前 2022/1/13 Safari 還不支援（caniuse）

    @media (width >= 300px) {
      .box {
        background: red;
      }
    }

  • 將 media query 的 break point 寫成變數

@custom-media --small (width >= 400px);

@media (--small) {
  /* css */
}

@media (--small) {
  /* css */
}

Container Queries​

  • css 除了可以寫 Media Queries 也可以寫 Container Queries，Media Queries 是針對視窗；Container Queries 既然是 container 就是針對元素了，詳細可參考 範例
    caution

    目前 2022/1/14 瀏覽器支援度 76% caniuse

.main,
.sidebar {
  container-type: inline-size;
}

@container (width >= 600) {
  .box {
    background: red;
  }
}

Clamp​

  • clamp(): 寫入最小值、最大值、以及當前的值（大部分瀏覽器已支援）
.font {
  font-size: clamp(0.5rem, 3.5vw, 10rem);
}

/* 0.5rem 代表最小的字體大小；3.5vw 為當前的字體大小；10rem 為最大值 */

Viewport Unit​

  • svh：最小的高度，s 代表 small，viewport 的高度扣掉上或下面的搜尋 input
  • dvh：d 代表 dynamic viewport 高度跟 svh 類似，差在他會動態改變，像是滑動頁面後且搜尋 input 會自己隱藏時與尚未滑動之前的高度會不一樣
  • lvh：最大的高度，l 代表 large，viewport 最大的高度

參考資料​